import React, { Component } from 'react'
import {Switch , Drawer, Button, Space ,Form, Input, InputNumber ,Tree,message} from 'antd';
import { CloseOutlined, CheckOutlined } from '@ant-design/icons';

export default class AddGoodType extends Component {
    state = {
        value : "",
        key:null,
        check:true,
    }
    onFinish = (values) => {
        console.log('Success:', values);
      };
    
    onCheck = (checkedKeysValue: React.Key[]) => {
        console.log('onCheck', checkedKeysValue);
        // setCheckedKeys(checkedKeysValue);
        this.setState({
            ...this.state,
            key : checkedKeysValue
        })
      };
    //添加按钮
     submit = () => {
         const [value,checkedKeys] = [this.state.value,this.state.key]
         if(!value){
            message.error("商品类型不能为空");
            console.log(checkedKeys);
          }else{
            if(checkedKeys){
              if(checkedKeys.checked.length != 1){
                  console.log(checkedKeys.checked[0]);
                message.error("请选择一个上级商品类型");
              }else{
                this.props.addOneType({
                    name:value,
                    Pid:checkedKeys.checked[0],
                    status: this.state.check ? 1 : 2,
                })
              }
            }else{
              message.error("请选择一个上级商品类型");}
          }
     }
     switch = (val)=>{
         console.log(val);
         this.setState({
             ...this.state,
             check:val
         })

     }
    render() {
        return (
            <>
            <Drawer
              title={`新增类型`}
              placement="right"
              size='large'
              onClose={this.props.addClose}
              visible={this.props.addStatus}
              footer={
                <Space style={{marginLeft:"550px"}}>
                <Button onClick={this.props.addClose}>取消</Button>
                  <Button type="primary" htmlType="submit" 
                  onClick={this.submit}  >
                    提交
                  </Button>
                </Space>  
            }
            >
    <Form
    //   name="basic"
      labelCol={{
        span: 4,
      }}
      wrapperCol={{
        span: 19,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={this.onFinish}
      autoComplete="off"
    >
      <Form.Item
        label="商品类型名称"
        name="goodName"
      >
        <Input value={this.state.value} onChange={(e)=>{this.setState({...this.state,value:e.target.value})}} />
      </Form.Item>

      <Form.Item
        label="上级商品类型"
        name="SJL"
      >
                <Tree
      checkable
      onCheck={this.onCheck}
      treeData={this.props.treeData}
      checkStrictly={true}

    />
      </Form.Item>
    
      <Form.Item
        label="初始状态"
        name="XX"
      >
         <Switch checkedChildren="启用" unCheckedChildren="停用" checked={this.state.check} defaultChecked onChange={(value)=>{this.switch(value)}}/>
      </Form.Item>

    </Form>
            </Drawer>
          </>
        )
    }
}
